<!DOCTYPE HTML>
<html>
<head>
<title>Canvas For All</title>
<meta name="viewport"
	content="maximum-scale=1.0,width=device-width,initial-scale=1.0,user-scalable=0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
	href="styles/jquery.mobile-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="styles/app.css" />

</head>

<body>
	<div data-role="page">
		<!-- Header da aplicação -->
		<div data-role="header" id="appHeader" data-position="fixed">
			<a href="#notifier-panel" data-inline="true" data-icon="info"
				data-iconpos="notext">Notifications</a>
			<h1>Canvas for All</h1>
			<a href="#menu-panel" data-inline="true" data-icon="bars"
				data-iconpos="notext">Menu</a>
			<a onclick="javascript: addCanvas();">add</a>

		</div>
		<!-- /header -->
		<!--  Conteúdo da página principal -->
		<div class="main" data-role="content">
			<ul data-role="listview" data-split-icon="delete"
				data-split-theme="d" data-inset="true" data-filter="true"
				data-filter-placeholder="Pesquisar por nome..." id="listaCanvas">
<!-- 				<li><a onclick="loadCanvas()" href="#"> -->
<!-- 						<h2>Meu projeto 01</h2> <a onclick='deleteCanvas(this)' href="#">#</a></li> -->
<!-- 				<li><a onclick="loadCanvas()" href="#"> -->
<!-- 						<h2>Meu projeto 02</h2> <a onclick='deleteCanvas(this)' href="#">#</a></li> -->
<!-- 						<li><a onclick="loadCanvas()" href="#"> -->
<!-- 						<h2>Meu projeto 03</h2> <a onclick='deleteCanvas(this)' href="#">#</a></li> -->
			</ul>
		</div>
		<!-- /content -->

		<!-- Painel de notificações -->
		<div data-role="panel" id="notifier-panel" data-position="left"
			data-display="overlay">
			<table data-role="table" data-mode="reflow"
				class="ui-responsive table-stroke">
				<thead>
					<tr>
						<th></th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><img src="http://placehold.it/50x50" alt="Avatar" /></td>
						<td><a href="#"> <span class="notifier-title">Leidson
									Dias</span>
								<p class="notifier-content">
									Adicionou um post-it ao quadrante <b>Valores Chaves</b> no <b>projeto:</b><i>Canvas
										for All</i>
								</p> <span class="notifier-date">2 dias atrás</span>
						</a></td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- /notifier panel -->
		<!-- Painel do Menu -->
		<div data-role="panel" id="menu-panel" data-position="right"
			data-display="overlay">
			<ul data-role="listview" data-inset="true" data-divider-theme="a">
				<li data-role="list-divider">Projetos</li>
				<li><a href="#">Meus</a></li>
				<li><a href="#">Participo</a></li>
				<li data-role="list-divider">Perfil</li>
				<li><a href="#">Ajuda</a></li>
				<li><a href="#">Configurações</a></li>
				<li><a href="#">Sair</a></li>
			</ul>
		</div>
		<!-- /menu panel -->
	</div>


	<script type="text/javascript" charset="utf-8"
		src="scripts/util/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="scripts/util/jquery.mobile-1.3.2.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="scripts/util/cordova.js"></script>
	<script type="text/javascript">
	var indiceCanvas = 0;
    $(function() {
        
    	listarCanvas();
    	console.log("lista");
    	
    });
	
		
	function addCanvas() {
		var data = new Date().getTime();
		var titulo = prompt("Digite o título do projeto:");
		if (titulo!=null && titulo!=""){
		  //alert("Hello " + titulo);
		  $(listaCanvas).append("<li><a onclick='loadCanvas("+indiceCanvas+")' href='#'><h2 id='t"+indiceCanvas+"'>" + titulo + "</h2> <a onclick='editCanvas("+indiceCanvas+")' href='#'>edit</a> <a onclick='deleteCanvass(this, indiceCanvas)' href='#'>#</a></li>");
		  insertCanvas( indiceCanvas , titulo, data );  
		  indiceCanvas++;
		}
		//$(item).parents('li').remove();
	}
		
	function editCanvas(indice) {
		var titulo = prompt("Digite o novo título do projeto:");
		if (titulo!=null && titulo!=""){
			console.log('t'+indice+' = '+titulo);
		  document.getElementById('t'+indice).innerHTML = titulo;
		  updateCanvas( indice , titulo );  
		}
	}
	
	function deleteCanvass(item, indice) {
		if(confirm("Apagar projeto?")){
		$(item).parents('li').remove();
		deleteCanvas(indice);
	}
	}

		function loadCanvas(id) {
			console.log('Load Canvas');
			/* window.open('pages/canvas.html'); */
			window.parent.location.href = "pages/canvas.html?canvas="+id;
		};
	</script>
	<script type="text/javascript" charset="utf-8"
		src="scripts/dao/bd_mobile.js"></script>
	
	<script type="text/javascript" charset="utf-8"
		src="scripts/dao/funcoes.js"></script>
</body>
</html>